<template>
    <div style="overflow:hidden;">
        <div class="user-header" align="center" 
        :style="{'background-image':'url('+require('@/assets/images/walletbg@2x.png')+')'}">
            <van-icon name="setting-o" class="user-set" />
            <div class="user-img">
                <van-image
                round
                fit="cover"
                width="80"
                height="80"
                :src="userData.avatarurl"
                />
                <em class="userImg-tip"><img src="@/assets/images/Ancrown@2x.png" alt=""></em>
            </div>
            <p>{{userData.nickname}} <img :src="userData.gender == '1' ? sexImg.male : sexImg.female" alt="" width="15"></p>
        </div>
        <ul class="user-list">
            <li v-for="item in userlist" :key="item.pageName" @click="toPage(item.pageName)">
                <span>
                    <img :src="item.icon" alt="" width="20">
                    {{item.title}}
                </span>
                <van-icon name="arrow" />
            </li>
        </ul>
    </div>
</template>
<script>
import {myInfo} from '@/api/mine.js'
import {mapGetters} from 'vuex';

export default {
    data() {
        return {
            sexImg:{
                male:require('@/assets/images/male@2x.png'),
                female:require('@/assets/images/female@2x.png')
            },
            userlist:[{
                icon:require('@/assets/images/Order@2x.png'),
                title:'我的订单',
                pageName:'orderList'
            },{
                icon:require('@/assets/images/friend@2x.png'),
                title:'邀请好友',
                pageName:'inviteFriend'
            },{
                icon:require('@/assets/images/team@2x.png'),
                title:'我的团队',
                pageName:'team'
            },{
                icon:require('@/assets/images/wallett@2x.png'),
                title:'我的钱包',
                pageName:'wallet'
            },{
                icon:require('@/assets/images/we@2x.png'),
                title:'关于我们',
                pageName:'aboutUs'
            },{
                icon:require('@/assets/images/Customer@2x.png'),
                title:'联系客服',
                pageName:null
            }],

            userData:{}
        }
    },
    computed: {
        ...mapGetters(['userId']),
    },
    methods: {
        toPage(pageName){
            if(pageName==null) return
            this.$router.push({name:pageName})
        }
    },
    mounted(){
        myInfo({
            user_id:this.userId
        }).then(res=>{
             // eslint-disable-next-line
            console.log(res)
            this.userData = res
        })
    }
}
</script>
<style lang="less" scoped>
.user-header{
    text-align: center;
    color: white;
    line-height: 2em;
    padding: 30px;
    margin: 0 -30px;
    background-size: cover;
    background-repeat: no-repeat;
}
.user-img{
    position: relative;
    display: inline-block;
    .userImg-tip{
        position: absolute;
        top: -10px;
        right: 0;
        z-index: 2;
        img{
            width: 45px/2;
        }
    }
}
.user-list{
    background:white;
    li{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid @border-color;
        height: 36px;
        line-height: 36px;
        padding: 10px;
    }
}
.user-set{
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 20px;
}
</style>